<template>
	<view class="Header">
		<view class="Bill" v-for="(item,index) in FeeData" :key="index">
			<view class="Management">{{item.type}}</view>
			<view class="Room">
				<view class="House">房号</view>
				<view class="number">{{item.houseno}}</view>
			</view>
			<view class="Room RoomHouse">
				<view class="House">账单</view>
				<view class="number">{{item.begindate}}至{{item.enddate}}</view>
			</view>
			<view class="Room RoomHouse">
				<view class="House">账单金额</view>
				<view class="number">￥{{item.price}}.00元</view>
			</view>
			<view class="Room RoomHouse">
				<view class="House">缴费时间</view>
				<view class="number">{{item.addtime.substr(0,10)}}</view>
			</view>
			<view class="Room RoomHouse">
				<view class="House">付款方式</view>
				<view class="number">微信支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		FeeList
	} from "../../apis/index.js"
	export default {
		data() {
			return {
				FeeData: [],
				// array: ['新疆', '山东菏泽曹县', '新加坡', '日本'],
				// index: 0
			}
		},
		created() {
			this.getFeeList()
		},
		methods: {
			async getFeeList() {
				let res = await FeeList()
				console.log("生活缴费", res);
				this.FeeData = res.list
			}
		}
	}
</script>

<style lang="less">

	.Bill {
		height: 426rpx;
		background-color: #fff;
		margin: 50rpx 15rpx 22rpx 15rpx;
		border-radius: 10rpx;
		// line-height: 50rpx;

		.Management {
			font-size: 33rpx;
			border-bottom: 3rpx solid #eee;
			margin-left: 34rpx;
			padding-bottom: 25rpx;
			padding-top: 34rpx;
		}
	}

	.Room {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		position: relative;

		.House {
			font-size: 30rpx;
			position: absolute;
			left: 38rpx;
			top: 25rpx;
		}

		.number {
			font-size: 30rpx;
			position: absolute;
			right: 38rpx;
			top: 25rpx;
		}
	}

	.RoomHouse {
		margin-top: 50rpx;
	}
</style>